<template>
	<view class="allocate-daetails-vison wf-box">
		<HeadNav titleName="节点分配" :navBarHeight="navBarHeight"></HeadNav>
		
		<view class="daetails-head" :style="{ paddingTop: navBarHeight }">
			<image class="avatar" src="../../static/img/avatar.png" mode=""></image>
			<view class="">
				<view class="nickname-view">
					<text class="nickname">夜晚的星光</text>
					<image class="grade-icon" src="../../static/img/grade-icon.png" mode=""></image> <text class="user-tag">暂无节点</text>
				</view>
				<view class="user-id">
					<text>ID:0x228...f6954</text> <image class="copy-icon" src="../../static/img/copy-icon.png" mode=""></image>
				</view>
			</view>
		</view>


		<view class="capital-view">
			<view class="capital-head">
				<image class="allocate-icon" src="../../static/img/allocate-icon.png" mode=""></image>
				<view class="">
					<view class="title">
						超级节点
					</view>
					<view class="openTime">
						开放时间：{{Info.openTime}}
					</view>
				</view>
			</view>
			<view class="capital-opt-ul">
				<view class="capital-opt-li" v-for="itme in capitalOptList">
					<view class="text">
						{{itme.text}}
					</view>
					<view class="value">
						{{itme.value}}
					</view>
				</view>
			</view>
		
			<view class="bonus-view">
				<text class="plan">
					预售数量
				</text>
				<text class="bonusTotal">
					3/20
				</text>
			</view>
			<progress :percent="Info.plan" border-radius="8" stroke-width="8" activeColor="#3F93FF" />


		</view>
	
		<view class="equity-view">
			<view class="equity-title">
				节点权益
			</view>
			<view class="equity-ul">
				<view class="equity-li" v-for="(item,index) in equityList">
					<image class="equity-icon" :src="item.icon" mode=""></image>
					
					<view class="name">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="popup"  background-color="#fff" :before-close="true">
			
			<view class="popup-main">
				<image @click="confirm" class="close-icon" src="../../static/img/close-icon.png" mode=""></image>
				<view class="popup-title">
					确认交易
				</view>
				<view class="KT-value">
					100,000.00KT
				</view>
				<view class="KT-name">
					支付金额
				</view>
				<view class="TK-opt-li" v-for="itme in TKoptList">
					<view class="name">
						 {{itme.name}}
					</view>
					<view class="value">
						  {{itme.value}}
					</view>
				</view>
			</view>
			<button class="confirm-btn"  @click="confirm">确认</button>
		</uni-popup>
		<button class="KT-participant-btn" @click="participant">获取节点</button>
		
	</view>
</template>

<script>
	import HeadNav from "@/components/HeadNav"
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				Info: {
					plan: 10,
					openTime: '2024-03-28 14:00',
					bonusTotal: 5000000,
					balance: 89
				},
				capitalOptList:[
					{text:'预售数量',value:'20'},
					{text:'价格',value:'100,000.00KT'},
					{text:'期数',value:'第 1 期'},
				],
				equityList:[
					{icon:'../../static/img/equity-icon1.png',name:'定期宝奖励'},
					{icon:'../../static/img/equity-icon2.png',name:'节点挖矿权重 120%'},
					{icon:'../../static/img/equity-icon3.png',name:'生态挖矿奖励'},
					{icon:'../../static/img/equity-icon4.png',name:'KT白金卡'},
					{icon:'../../static/img/equity-icon5.png',name:'运营补贴'},
					{icon:'../../static/img/equity-icon6.png',name:'手续费分红'},
				],
				TKoptList:[
					{name:'支付方式',value:'我的流通KT'},
					{name:'余额',value:'100.00KT'},
				]

			}
		},
		components: {
			HeadNav
		},
		mixins: [navBarMixin],
		methods: {
			confirm(){
				this.$refs.popup.close()
				
			},
			
			participant() {
				
				this.$refs.popup.open('bottom')
			},
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	@mixin main-view {
		width: 92%;
		margin-left: 4%;
		
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 30rpx;
	}
	
	.wf-box {
		overflow: hidden;
		padding-bottom: 90rpx;
	}

	.daetails-head{
		width: 100%;
		background: #FFFFFF;
		@include flex-between;
		justify-content: flex-start;
		height: 176rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		margin-top: 96rpx;
		margin-bottom: 30rpx;
		.avatar{
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
		
		.nickname-view{
			@include flex-between;
			.nickname{
				font-weight: 500;
				font-size: 29rpx;
				color: #333333;
			}
			.grade-icon{
				width: 104rpx;
				height: 40rpx;
				margin:0 14rpx;
			}
			.user-tag{
				font-size: 25rpx;
				color: #999999;
			}
		}
		.user-id{
			@include flex-between;
			justify-content: flex-start;
			margin-top: 30rpx;
			font-size: 25rpx;
			color: #6C6B6B;
			
			.copy-icon{
				width: 42rpx;
				height: 42rpx;
				margin-left: 12rpx;
			}
		}
	}



	.capital-view {
	@include main-view;
		.capital-head{
			@include flex-between;
			justify-content: flex-start;
			.allocate-icon{
				width: 84rpx;
				height: 84rpx;
				margin-right: 20rpx;
			}
			.title{
				font-size: 34rpx;
				color: #333333;
			}
			.openTime{
				font-size: 25rpx;
				color: #666666;
				margin-top: 10rpx;
			}
		}
		
		.capital-opt-ul{
			@include flex-between;
			margin-top: 34rpx;
			.capital-opt-li{
				.text{
					font-size: 25rpx;
					color: #999999;
				}
				.value{
					font-size: 29rpx;
					color: #333333;
					margin-top: 14rpx;
				}
			}
		}

		.bonus-view {
			@include flex-between;
			margin: 40rpx 0 20rpx;
			font-size: 24rpx;
			color: #999999;
			

			.plan {}

			.bonusTotal {}
		}
	}
	
	.equity-view{
		@include main-view;
		margin-top: 30rpx;
		
		.equity-title{
			font-weight: 500;
			font-size: 34rpx;
			color: #333333;
		}
		.equity-ul{
			display: flex;
			flex-wrap: wrap;
			.equity-li{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				height: 160rpx;
				width: 25%;
				margin-top: 40rpx;
				.equity-icon{
					width: 70rpx;
					height: 70rpx;
				}
				.name{
					font-size: 24rpx;
					color: #333333;
					text-align: center;
				}
			}
		}
		
	}
	
	.popup-main{
		border-radius: 24rpx 24rpx 0 0 ;
		position: relative;
		.close-icon{
			position: absolute;
			right: 40rpx;
			top: 60rpx;
			width: 40rpx;
			height: 40rpx;
		}
		.popup-title{
			width: 750rpx;
			height: 176rpx;
			background: linear-gradient( 180deg, #EBF3FF 0%, #FFFFFF 100%);
			border-radius: 25rpx 25rpx 0rpx 0rpx;
			line-height: 176rpx;
			font-weight: 500;
			font-size: 34rpx;
			color: #333333;
			text-align: center;
			border-radius: 20rpx 20rpx 0 0 ;
		}
		.KT-value{
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			text-align: center;
		}
		.KT-name{
			font-size: 28rpx;
			color: #333333;
			margin-top: 20rpx;
			text-align: center;
		}
		
		.TK-opt-li{
			width: 92%;
			margin-left: 4%;
			height: 110rpx;
			border-bottom: 1rpx solid #EEEEEE;
			@include flex-between;
			.name{
				font-size: 28rpx;
				color: #666666;
			}
			.value{
				font-size: 28rpx;
				color: #333333;
			}
		}
	}


	.KT-participant-btn {

		width: 84%;
		margin-top: 70rpx;
		height: 83rpx;
		background: #3F93FF;
		border-radius: 42rpx 42rpx 42rpx 42rpx;
		color: #fff;

	}
	
	.confirm-btn{
		width: 74%;
		height: 80rpx;
		border-radius: 80rpx;
		line-height: 80rpx;
		background: #3F93FF;
		color: #fff;
		font-weight: 500;
		font-size: 28rpx;
		margin: 62rpx auto 56rpx;
	}


	::v-deep {
		.uni-progress-bar {

			border-radius: 8px !important;
			overflow: hidden;
		}
		.uni-popup{
			view{
				border-radius: 20rpx 20rpx 0 0 !important;
			}
			
		}
	}
</style>